<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.company_id" style="width:120px"  @change="handleFilter(listQuery.company_id)" :placeholder="$t('table.company')" clearable size="small">
            <el-option v-for="(item,index) in companylist " :key="index" :label="item.company" :value="item.id" />
      </el-select>
      <el-select v-model="listQuery.department_id" style="width:120px" clearable size="small" @change="handleFilter" :placeholder="$t('table.department')">
            <el-option v-for="(item,index) in department_list " :key="index" :label="item.department" :value="item.id" />
        </el-select>
      <el-input v-model="listQuery.person_id" size="small" style="width: 200px;" :placeholder="$t('table.worker_id')" clearable
        @change="handleFilter" />
      <el-input v-model="listQuery.name" size="small" style="width: 200px;" :placeholder="$t('table.worker_name')" clearable @change="handleFilter" />
      <el-button type="primary" size="small" @click="getLists">{{ $t('table.search') }}</el-button>
      <add-page @getLists="getLists" />
      <excel @getLists="getLists" />
      <companydepartments :multipleSelection="multipleSelection" @getLists="getLists"></companydepartments>
      <joiningequipment :multipleSelection="multipleSelection"></joiningequipment>
      <el-button type="primary" size="small" @click="getExcel">{{ $t('table.export') }}</el-button>
      <el-button type="danger" size="small" @click="deletedof">{{$t('table.Massdelete')}}</el-button>
      <!-- <el-button type="primary" size="small" @click="pushEquipment"
        >批量推送到设备</el-button
      > -->
    </div>

    <el-table v-loading="listLoading" ref="multipleTable" :data="list" :header-cell-style="{
        background: '#f2f2f2',
        color: '#606266',
        height: '10px',
        padding: '5px'
      }" :row-style="{ height: '40px', padding: '0px' }" :cell-style="{ padding: '0px' }" element-loading-text="Loading" border fit
      highlight-current-row height="640px" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column class-name="status-col" :label="$t('table.worker_id')" align="center">
        <template slot-scope="scope">
          {{ scope.row.person_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.worker_name')">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.avatar')" align="center">
        <template slot-scope="scope">
          <img :src="base64Prefix + scope.row.face_pic" style="width: auto;height: 80px;border: 0;" @click="bigImg(scope.row.person_id)">
          <transition name="el-zoom-in-top">
            <div v-show="scope.row.person_id === listItemId" class="bigImg" @click="bigImg">
              <img :src="base64Prefix + scope.row.face_pic">
            </div>
          </transition>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.company')" align="center">
        <template slot-scope="scope">
          {{ scope.row.company }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.department')" align="center">
        <template slot-scope="scope">
          {{ scope.row.department }}
        </template>
      </el-table-column>
      <!-- <el-table-column :label="$t('staff.access_authorization')" align="center">
        <template slot-scope="scope">
          
          <span v-for="(item,index) in scope.row.deviceAuth" :key="index">盎司附近开了算法、啊是法律框架、收到付款了撒法鲁克、{{item.auth_id}}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" :label="$t('table.registration_time')">
        <template slot-scope="scope">
          {{ scope.row.person_ts }}
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.operation')">
        <template slot-scope="scope">
          <edit-page :row_id="Number(scope.row.person_id)" @getLists="getLists" />
          <el-button type="danger" size="small" @click="deleted(scope.row.person_id)">{{$t('table.delete')}}</el-button>
          <!-- <el-button
          style="margin-top:10px;margin-left:3px"
            type="success"
            size="small"
            @click="pushEquipment(scope.row.id)"
            >推送人员到设备</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import editPage from "./editPage";
import addPage from "./addPage";
import excel from "./ImportExecl";
import companydepartments from "./Setcompanydepartments"
import joiningequipment  from"./joiningequipment"

import store from "@/store";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import {
  employee_get_list,
  employee_delete,
  demployee_get_select,
  push_edit,
  service_deleteAll,
  department_get_select,
} from "@/api/user_manage/user_manage";

import {
  get_select
} from "@/api/organization_manage/organization_manage";

export default {
  components: {
    editPage,
    addPage,
    UploadExcelComponent,
    excel,
    companydepartments,
    joiningequipment
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      base64Prefix: "data:image/jpg;base64,",
      list: null,
      listLoading: true,
      total: null,
      listItemId: null,
      multipleSelection: [],
      current_page: null,
      last_page: null,
      per_page: null,
      companylist: null,
      department_list: null,
      sheb: [],
      listQuery: {
        department_id:undefined,
        company_id: undefined,
        name: undefined,
        person_id: undefined,
        page: 1,
        pagesize: 10,
      },
    };
  },
  created() {
    this.getLists();
  },
  methods: {
    // 获取展示列表数据
    getLists() {
      this.listLoading = true;
      employee_get_list(store.getters.token, this.listQuery).then((res) => {
        console.log(res, "resssss");
        this.list = res.data.list.data;
        // this.list.deviceAuth.forEach((item,i)=>{
        //      this.sheb = item
        //      console.log(this.sheb,'this,sheb')
        // })
        this.current_page = res.data.list.current_page;
        this.per_page = res.data.list.per_page;
        this.last_page = res.data.list.last_page;
        this.total = res.data.list.total;
        this.listLoading = false;
      });
      // 获取公司数据
      get_select(store.getters.token).then((res) => {
        this.companylist = res.data.list
      })
    },
    // 分页相关方法
    handleFilter(val) {
      console.log(val,'val')
      this.listQuery.page = 1;
      this.getLists();
      department_get_select(store.getters.token, { company_id: val }).then(
        (res) => {
          this.department_list = res.data.list;
          console.log(this.department_list, "this,department_list");
          console.log(res, "res.data.list");
        }
      );
    },
    handleSizeChange(val) {
      this.listQuery.pagesize = val;
      this.getLists();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLists();
    },
    handleSelectionChange(val) {
      console.log(val, "oooooooooooooooooooooo");
      this.multipleSelection = [];
      val.forEach((item) => {
        this.multipleSelection.push(item.person_id);
        console.log(this.multipleSelection,'2222222222222')
      });
    },
    // 删除一条数据
    deleted(id) {
      console.log(id, "id");
      this.$confirm(this.$t("table.delete_msg"), this.$t("table.tip"), {
        confirmButtonText: this.$t("table.complete"),
        cancelButtonText: this.$t("table.cancel"),
        type: "warning",
      }).then(() => {
        employee_delete(store.getters.token, { person_id: id }).then((res) => {
          if (res.status == 200) {
            this.$message.success(this.$t("table.delete_complete"));
            this.getLists();
          } else {
            this.$message.error();
            this.$t("table.delete_fail");
          }
        });
      });
    },
    //批量删除
    deletedof(){
        this.$confirm(this.$t("table.delete_msg"), this.$t("table.tip"), {
        confirmButtonText: this.$t("table.complete"),
        cancelButtonText: this.$t("table.cancel"),
        type: "warning",
      }).then(() => {
        service_deleteAll(store.getters.token,{ person : this.multipleSelection }).then((res)=>{
         if (res.status) {
            this.$message.success(this.$t("table.delete_complete"));
            this.getLists();
          } else {
            this.$message.error();
            this.$t("table.delete_fail");
          }
        })
      });
    },
    bigImg(id) {
      console.log(id, "id");
      if (id > 0) {
        this.listItemId = id;
      } else {
        this.listItemId = null;
      }
    },

    // 导出表
    getExcel() {
      // 当前时间
      const date = new Date(); // 时间戳为10位需乘1000，为13位则不用
      const Y = date.getFullYear(); // 年
      const M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1; // 月
      const D =
        date.getDate() < 10 ? "0" + date.getDate() + "" : date.getDate();
      const date_time = Y + "-" + M + "-" + D;
      demployee_get_select(store.getters.token).then((res) => {
        console.log(res, "rrrrsaaaaa");
        this.export = res.data.list;
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
              this.$t('table.worker_id'),
              this.$t('table.worker_name'),
              this.$t('table.company'),
              this.$t('table.department'),            
              this.$t('table.role'),            
              this.$t('table.registration_time'),            
          ];
          // const tHeader = ["工号", "姓名", "公司", "部门", "角色", "注册时间"];
          const filterVal = [
            "person_id",
            "name",
            "company",
            "department",
            "role_name",
            "person_ts",
          ];
          const list = res.data.list;
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: this.$t('staff.staff_report') + " " + date_time,
            autoWidth: true,
            bookType: "xlsx",
          });
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    // 导出报表结束
    saveButton() {
      console.log(this.$refs.multipleTable, "00000000000");
    },
    // 推送到设备
    // pushEquipment(id) {
    //   console.log(id,'id')
    //   var data = {
    //     id: id,
    //     update_data_list: "1"
    //   }
    //       push_edit(store.getters.token, data).then(res => {
    //       if (res.data.status) {
    //         this.$message.success("推送成功");
    //         this.getLists();
    //       } else {
    //         this.$message.error("推送失败:" + "   " + res.data.msg);
    //       }
    //     });
    // }
  },
};
</script>

<style></style>

<style scoped>
.pagination-container {
  margin-top: 25px;
}
.app-container {
  border: #eee solid 10px;
}
.bigImg {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /*transition:1s;*/
}
.bigImg img {
  max-width: 650px;
  min-width: 235px;
}
</style>
